<template>
    <div class="Register">
        <header class="Register_header">
  <!-- 返回 -->
        <p class="Register_back" @click='Register_back'><img src="../../../static/imgs/return.png"><span >挂号陪诊</span></p>
  <!-- 跳转到介绍 -->
        <p class="Register_to_serve" @click='Register_to_serve'>服务介绍</p>
    </header>
 
  <main class="Register_main">
    <div class="main_top">
       <section class="Register_section">
         <p><img src="../../../static/imgs/fangkuai.png"><span>请选择服务类型</span></p>
             <p></p>
       </section>
      <!-- 切换事件 -->
         <div class="Register_zhujia">
            <p :class="{change:svl==1}" @click='svl = 1'>专家号</p>
            <p :class="{change:svl==2}" @click='svl = 2'>特需号</p>
         </div>
    
    </div>
    
     <section class="Register_infos">
      

        <!-- 医院选择 -->
        <router-link to='Re_opt'>
            <div class="infos1 Register_to_opt">
                     <img src="../../../static/imgs/dd_infos1.png">
                     <p><input type="text"  placeholder="北京儿童医院"/></p>
                     <img src="../../../static/imgs/dd_infos7.png">
            </div>
        </router-link>

        <!-- 科室选择 -->
        <!-- <router-link  tag="section"
                      :to="{name:'Re_depart_comp',params:{dataid:'qita'}}" > -->
         <router-link to='Re_depart' tag="section"> 
            <div class="infos1 Register_to_departments">
                   <img src="../../../static/imgs/dd_infos2.png">
                   <p>
                   <input type="text" placeholder="请选择挂号科室(必选)"/>
                   <!-- {{params}} -->{{count}}
                   </p>
                   <img src="../../../static/imgs/dd_infos7.png">
            </div>
        </router-link> 
       <!-- 医生选择 -->
       <router-link to='Re_doctorlist'>
          <div class="infos1 Re_to_doctor">
                  <img src="../../../static/imgs/dd_infos3.png">
                  <p><input type="text"  placeholder="医生(不选,推荐最优)"/></p>
                  <img src="../../../static/imgs/dd_infos7.png">
           </div>
        </router-link> 


       <!-- 疾病选择 -->
        <router-link to='Re_disease'>
             <div class="infos1 Re_to_disease">
                  <img src="../../../static/imgs/dd_infos4.png">
                <p><input type="text"  placeholder="请选择疾病(选填)"/></p>
                  <img src="../../../static/imgs/dd_infos7.png">
             </div>
        </router-link>
         <!-- 就诊时间 -->
         <div class="infos1">
              <img src="../../../static/imgs/dd_infos5.png">
              <p>
              <section id="form">
                <form action="">
                  
                  <input type="text" name="USER_AGE" id="USER_AGE" readonly class="input" placeholder="请填写你的出生日期" v-datetime-picker/>
                  <div class="clear h10"></div>
                  
                </form>
              </section>

            </p>
              <img src="../../../static/imgs/dd_infos7.png">
         </div>

        <!-- 患者信息 -->
         <router-link to='Re_patient'>
             <div class="infos1 Re_to_patient">
                  <img src="../../../static/imgs/dd-touxiang.png">
                  <p><input type="text"  placeholder="请选择患者信息"/></p>
                  <img src="../../../static/imgs/dd_infos7.png">
             </div>
        </router-link>


         <div class="infos1 infos2">
            <p>
              <img src="../../../static/imgs/dd-bianji.png">
              <input type="text" placeholder="备注相关信息">
            </p>
         </div>
      


      <!-- 地图 -->
       <div class="infos1 Re_to_map" @click="isMapOpen=true">
          <img src="../../../static/imgs/dd_infos1.png">
          <p>该医院所在位置</p>
          <img src="../../../static/imgs/dd_infos7.png">
       </div>



     </section>
    <!-- 点击切换事件 -->
     <section class="main_bottom">
         <div class="infos3">
                <p>初级挂号导诊 <img class="Register_to_serve" src="../../../static/imgs/dd-btnn.png"></p>
                <span :class='{rot:svl==1}' @click="svl=1"></span><!-- <img  src="../../imgs/dd-checked.png"> -->
             </div>
            
            <div class="infos3">
                <p>高级挂号导诊 <img class="Register_to_serve" src="../../../static/imgs/dd-btnn.png"></p>
                <span :class='{rot:svl==2}' @click="svl=2"></span><!-- <img src="../../imgs/dd-yuan.png"> -->
            </div>
     </section>

  </main>

      <!--有点击事件-->    
        <footer class="footer">
              <p class="Register_next">下一步</p>
        </footer>

        <div v-bdmap class="map-wrapper" id="map" :class="{active:isMapOpen}" >
        </div>
        <p class="fixe" @click="isMapOpen=false" :class="{active:isMapOpen}">x</p>
    </div>
</template>
<script>
import store from '../../store/store.js'
import {mapState,mapMutations } from 'vuex'

 import '../../../static/js/bdmap.js'
 import mobiscroll from '../../assets/mobiscroll/js/mobiscroll.javascript.js'
    export default {
        name:'Register',
        data:function(){
          return {
              svl:1,
              text:'',
              isMapOpen: false
              //params:
          }
        },
        watch:{
            'text':function(newValue,oldValue){
                
            }
        },
        computed:mapState(['count']),
        directives: {
            datetimePicker: {
                inserted: function(el){
                  mobiscroll.date(el,{
                    theme: 'ios',
                    buttons: ['set','cancel','clear','now'],
                   // dateFormat: 'yyyy年mm月dd日'
                    // dateWheels: '|yy年 mm月 dd日|'
                  })
                }
              },
              bdmap: {
                  inserted: function(el){
                //创建和初始化地图函数：
                function initMap(){
                  createMap();//创建地图
                  // setMapEvent();//设置地图事件
                  // addMapControl();//向地图添加控件
                  // addMapOverlay();//向地图添加覆盖物
                }
                function createMap(){
                  map = new BMap.Map('map');
                  map.centerAndZoom(new BMap.Point(116.582098,39.836481),11);
                }
                function setMapEvent(){
                  map.enableScrollWheelZoom();
                  map.enableKeyboard();
                  map.enableDragging();
                  map.enableDoubleClickZoom()
                }
                function addClickHandler(target,window){
                  target.addEventListener("click",function(){
                    target.openInfoWindow(window);
                  });
                }
                function addMapOverlay(){
                }
                var map;
                initMap();
              }
            }
          },
          methods:{
            Register_back:function(){
              this.$router.push({path:"./#"})
            },
            Register_to_serve:function(){
            	this.$router.push({path:"/Re_serve"})
            }
          },
          created () {
                //this.getData(this.$route.params.dataid);
                //this.params = this.$route.params.text;
               // console.log(this.$route.params.text);
              },
         store     
    }

</script>
<style scoped lang='less'>
.PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}

.Flex{
    display:flex;
    justify-content: space-between;
    align-items: center;
    
}

body{
      background: #eff3f2; 
      scroll:none;
      
}

.Register{
  position: relative;
  .map-wrapper{
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    transform: scale(0);
    transition: transform 1.5s ease;
    background:orange;
    z-index:9;
    &.active{
      transform: scale(1);
    }
  }
}
.fixe{
  position:fixed;
  .PxToRem(width,60);
  .PxToRem(height,60);
  transform: scale(0);
  transition: transform 3s ease;
  z-index: 999;
  .PxToRem(top,10);
  .PxToRem(left,30);
   background:#ccc;
  .PxToRem(line-height,50);
  .PxToRem(font-size,50);
  .PxToRem(border-radius,60);
   text-align: center;
   &.active{
      transform: scale(1);
    }
}
.Register_header{
       background: url(../../../static/imgs/Reg_serve_bg01.jpg);
       
        position: fixed;
        top: 0;
        width: 100%;
        .Flex;
        .PxToRem(font-size, 39);
        .PxToRem(height, 88);
         background: #f8f8f8;
         padding:0 2%;
     p:nth-child(1){
           display: flex;
           align-items: center;
           span{
              .PxToRem(margin-left, 39);
           }
           img{
               .PxToRem(width, 55);
               .PxToRem(height, 55);
           }
   }
     p:nth-child(2){
       .PxToRem(padding-right, 35);
   }
}

.Register_main{
    overflow-y: hidden;
    .PxToRem(margin-top,88); 
     .main_top{
      background: #fff;
       .Register_section{
       .PxToRem(padding-top,40);  
       .PxToRem(font-size, 39);
       .Flex;
       p:nth-child(1){
             .PxToRem(padding-left, 36);
              display: flex;
              align-items: center;
           span{
              .PxToRem(font-size, 30);
              .PxToRem(margin-left, 39);
               color: #999;  }
         }
    } 
      
.Register_zhujia{
           .PxToRem(margin-top,41);
           .PxToRem(padding-bottom,48);
          .Flex;
           justify-content: space-around;
           p:nth-child(1){
            .PxToRem(margin-left,109);
           } 
          p{
             border: 1px solid #999999; 
             .PxToRem(width, 277);
             .PxToRem(height, 87);
             .PxToRem(border-radius, 7);
             text-align: center;
             .PxToRem(width, 277);
             .PxToRem(line-height, 87);
             .PxToRem(font-size, 30);
          } 
          p.change{
            color:#1ac5a1;
            border:1px solid #1ac5a1;
          }
       }
      
     }  
       
.Register_infos{
    .PxToRem(margin-top,20);
      background: #fff;
      #form{
        margin-left:-2%;
      }
      #USER_AGE{
            .PxToRem(font-size, 28);
            border:none;

      }
       .infos1{
           border-bottom: 1px solid #f7f7f7;
           .PxToRem(height, 120);
           .PxToRem(font-size, 28);
           .Flex();
           justify-content: space-around;
           .PxToRem(padding-left, 40);
           .PxToRem(padding-right, 30);
           p{
               flex: 3;
               .PxToRem(padding-left, 41);
               input{
                   border: none;
                   outline: none;
               } 
           }
       }
      
.infos2{
         p{.PxToRem(border-radius,18);
             .PxToRem(width, 658);
             .PxToRem(height, 140);
              background: #eff3f6; 
              .Flex();
            input{
                 flex: 2;
                 background: #eff3f6;
                 outline: none;
           .PxToRem(padding-left, 21);
            }  
         } 
      }
       
   }
   
   
   .main_bottom{
        .PxToRem(-top, 22);
        .PxToRem(padding-bottom, 157);
        .infos3{
             .Flex();
             background: #FFFFFF;
             padding: 0 4%;
             .PxToRem(height, 123);
             border-bottom: 1px solid #f7f7f7; 
             .PxToRem(font-size, 31);
             span{
                .PxToRem(height, 45);
                .PxToRem(width, 44);
                background:url("../../../static/imgs/dd-yuan.png");
             }
             span.rot{
                  background:url("../../../static/imgs/dd-checked.png");
             }
       } 
    }
}

.footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    .PxToRem(height, 157);
    display: flex;
    align-items: center;
    background: #fff;
    p{
        .PxToRem(width, 659);
        .PxToRem(height, 93);
         background: #1cc6a2;
        .PxToRem(border-radius,18);
         margin: 0 auto;
         text-align: center;
        .PxToRem(line-height, 93);
        color: #fff;
    }
    
   
    
}

</style>


